import React from 'react'
import Moment from 'react-moment'
import { StyleSheet, Text, View } from 'react-native'
import { capitalize } from 'lodash'
import { Avatar } from './avatar'

export const EventItem = ({ event }) => (
  <View style={styles.container}>
    <View style={styles.avatar}>
      <Avatar size={50} />
    </View>
    <View style={styles.wrapper}>
      <View style={styles.header}>
        <View style={styles.literal}>
          <Text style={styles.name}>{event.from.name}</Text>
          <Text style={styles.role}>{capitalize(event.from.role)}</Text>
        </View>
        <Text style={styles.time}>
          <Moment calendar>{event.updatedAt}</Moment>
        </Text>
      </View>
      <Text style={styles.content}>{event.content}</Text>
    </View>
  </View>
)

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: 'whitesmoke',
  },
  avatar: {
    margin: 10,
  },
  wrapper: {
    flex: 1,
    marginVertical: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  literal: {
    marginBottom: 5,
  },
  name: {
    fontSize: 15,
    marginBottom: 5,
  },
  role: {
    fontSize: 12,
    color: 'slategray',
  },
  time: {
    fontSize: 12,
    marginRight: 15,
    color: 'slategray',
  },
  content: {
    fontSize: 15,
    marginVertical: 5,
  },
})
